<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .box {
        width: 200px;
        height: 200px;
        border: 5px yellowgreen solid;
      }
      input {
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="box">盒子1</div>
    <input type="text" />
    <script>
      // 1. 点击事件
      // 1.1 找到元素
      const div = document.querySelector("div");
      // 1.2 绑定点击事件
      div.addEventListener("click", function () {
        // 1.3 函数中添加逻辑代码， this指向当前dom元素，div
        console.log(this);
        this.style.backgroundColor = "#0094ff";
        this.innerHTML = "吃饭";
      });

      // 2. 鼠标移入移出事件
      div.addEventListener("mouseenter", function () {
        console.log("enter");
        this.style.backgroundColor = "red";
      });
      div.addEventListener("mouseleave", function () {
        console.log("leave");
        this.style.backgroundColor = "white";
      });

      // 需求1： 失去焦点之后， 如果之后输入框没有内容， 加上红色边框
      // 需求2： 按下回车后吗，弹窗显示用户输入的内容
      // 需求3： 判断输入的内容是否为邮箱， 不是 -> 输入框变红， 是 -> 变绿
      // 3. 获取输入框
      const input = document.querySelector("input");
      // 绑定事件
      // 3.1 获取焦点事件
      input.addEventListener("focus", function () {
        console.log("focus - 获取焦点");
      });
      // 3.2 失去焦点事件
      input.addEventListener("blur", function () {
        console.log("blur - 失去焦点");
        // 实现需求1
        if (this.value === "") {
          this.style.border = "2px red solid";
        } else {
          this.style.border = "1px black solid";
        }
      });
      // 3.3 按下事件
      input.addEventListener("keydown", function () {
        console.log("keydown - 按下");
      });

      // 3.4 松开事件
      // 有事件参数， 有需要可获取
      input.addEventListener("keyup", function (value) {
        console.log("keyup - 松开");
        console.log(value.keyCode); // 回车键keycode： 13
        if (value.keyCode === 13) {
          alert(this.value);
        }
      });
      // 3.5 输入事件
      input.addEventListener("input", function () {
        console.log("input - 输入");
        console.log(this.value);
      });
    </script>
  </body>
</html>
